<template>
	<view>

		<view v-if="items_index_1==index" class="a-c  p-b-10 " v-for="(item,index) in field_data_list"
			:key="'data'+index">

			<view class=" ">
				<template v-if="item.value_type=='前端传值'&&crud_find.type=='edit'">
					<view class="p-t-10" style="width: 400rpx;">
						<uni-easyinput v-model="item.name">
						</uni-easyinput>
					</view>
					<view class="p-t-10" style="width: 400rpx;">
						<uni-easyinput v-model="item.placeholder">
						</uni-easyinput>
					</view>
				</template>
				<view class="p-t-10" style="width: 400rpx;">
					<uni-data-select isdata="data" :clear="false" :value="item.key" :index="index"
						@change="field_where_list_where_ziduan" :localdata="ziduan_list" placeholder="选择字段">
					</uni-data-select>
				</view>
				<view v-if="where_type==1" class="p-t-10" style="width: 400rpx;">
					<uni-data-select isdata="data" :clear="false" :index="index" :value="item.where"
						@change="field_where_list_where_where" :localdata="where_list" placeholder="条件类型">
					</uni-data-select>
				</view>
				<view class="p-t-10" style="width: 400rpx;" v-if="crud_find.type=='edit'">
					<uni-data-select isdata="data" :clear="false" :index="index" :value="item.value_type"
						@change="field_where_list_where_val" :localdata="where_val" placeholder="值的类型">
					</uni-data-select>
				</view>
				<view class="banmi_flex a-c p-t-10">
					<view v-if="item.value_type=='前端传值'" class=" " style="width: 400rpx;">
						<uni-data-select isdata="data" :value="item.input_box" :clear="false" :index="index"
							@change="front_list_val" :localdata="front_list" placeholder="数据类型">
						</uni-data-select>

					</view>
					<view class="m-l-10" style="margin-top: 10rpx;"
						v-if="item.input_box=='select'||item.input_box=='switch'||item.input_box=='checkbox'">
						<button size="mini" @click="on_select_set(index,item.input_box)"
							style="background-color: #1E90FF;width: 80px;">
							<text class="cff">设置选项</text>
						</button>
					</view>
				</view>

				<view v-if="item.value_type=='固定值'" class="p-t-10" style="width: 400rpx;">
					<uni-easyinput v-model="item.value" placeholder="请输入固定值">
					</uni-easyinput>
				</view>
				<view v-if="item.value_type=='后端生成'" class="p-t-10" style="width: 400rpx;">
					<uni-data-select isdata="data" :clear="false" :value="item.value" :index="index"
						@change="field_where_list_where_value" :localdata="h_list_validate" placeholder="选择后端生成的值">
					</uni-data-select>
				</view>
				<template v-if="crud_find.type=='edit'">
					<view v-if="item.value_type=='前端传值'" class="p-t-10" style="width: 400rpx;">
						<uni-data-select isdata="data" :value="item.empty" :clear="false" :index="index"
							@change="field_where_list_where_kong" :localdata="list_kong" placeholder="是否可以为空">
						</uni-data-select>
					</view>

				</template>


				<view v-if="item.value_type=='前端传值'&&item.empty === 'false'" class="p-t-10" style="width: 400rpx;">
					<uni-data-select isdata="data" :value="item.verify" :clear="false" :index="index"
						@change="field_where_list_where_verify" :localdata="q_list_validate" placeholder="选择验证条件">
					</uni-data-select>
				</view>

				<view v-if="item.value_type=='前端传值'&&item.empty === 'false'" class="p-t-10 banmi_flex a-c">
					<view class="" style="width: 400rpx;">
						<uni-easyinput :clear="false" v-model="item.verify_val" placeholder="示例:手机号">
						</uni-easyinput>
					</view>
					<text class="m-l-10 cred">不得为空</text>
				</view>

				<view v-if="item.value_type=='前端传值'&&item.empty === 'false'" class="p-t-10 banmi_flex a-c">
					<view class="" style="width: 400rpx;">
						<uni-easyinput :clear="false" type="number" v-model="item.max_number" placeholder="最大字数">
						</uni-easyinput>
					</view>
				</view>

			</view>

			<view class="p-t-10">
				<button size="mini" @click="on_del_field_data_list(index)"
					style="background-color: #1E90FF;width: 80px;">
					<text class="cff">删除</text>
				</button>
			</view>

		</view>



	</view>
</template>

<script>
	import popup from '@/uni_modules/uni-popup/components/uni-popup/popup.js'
	export default {
		components: {

		},
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		props: {
			where_type: {
				type: Number,
				default () {
					return 0;
				}
			},
			crud_find: {
				type: Object,
				default () {}
			},
			field_list: {
				type: Array,
				default () {}
			},
			ziduan_list: {
				type: Array,
				default () {}
			},
			items_index: {
				type: String,
				default () {
					return '';
				}
			},

		},
		watch: {
			items_index(val) {
				this.items_index_1 = val
			},

		},
		data() {
			return {
				field_data_list: [],
				list_kong: [{
						"value": 'true',
						"text": "可以为空",
					},
					{
						"value": 'false',
						"text": "必须有值",
					},
				],
				where_val: [],
				//前端类型
				front_list: [{
						"value": 'text',
						"text": "单文本框", //ok
					},
					{
						"value": 'content',
						"text": "富文本框", //ok
					},
					{
						"value": 'img',
						"text": "图片选择", //ok
					},
					{
						"value": 'video',
						"text": "视频选择", //ok
					},
					{
						"value": 'business_time',
						"text": "营业时间",
					},
					{
						"value": 'time',
						"text": "时间选择",
					},
					{
						"value": 'day',
						"text": "日期选择",
					},
					{
						"value": 'switch',
						"text": "开关按钮", //ok
					},
					{
						"value": 'checkbox',
						"text": "多选按钮", //ok
					},
					{
						"value": 'select',
						"text": "单列下拉框", //ok
					},
					{
						"value": 'file_upload', //ok
						"text": "文件上传",
					},
					{
						"value": 'city', //ok
						"text": "城市选择器",
					},
					{
						"value": 'map', //ok
						"text": "坐标选择",
					},

					{
						"value": 'colour', //ok
						"text": "颜色选择器",
					}
				],
				where_list: [{
						"value": '=',
						"text": "等于",
					},
					{
						"value": '>=',
						"text": "大于等于",
					},
					{
						"value": '<>',
						"text": "不等于",
					},
					{
						"value": '<',
						"text": "小于",
					},
					{
						"value": '<=',
						"text": "小于等于",
					},
					{
						"value": 'like',
						"text": "模糊查询搜索",
					}
				],
				h_list_validate: [],
				q_list_validate: [],
				items_index_1: 0
			}
		},
		mounted() {




			this.open(this.field_list, this.where_type, this.items_index);
		},

		methods: {
			open(field_list, where_type, items_index) {
				var crud_find_type = uni.getStorageSync('crud_find_type')
				if (field_list != 'edit') {
					for (var i = 0; i < field_list.length; i++) {
						field_list[i]['input_box'] = 'text'
					}
				}

				this.field_data_list = field_list
				if (where_type == 0) {
					this.where_val = [{
							"value": '固定值',
							"text": "固定值",
						},
						{
							"value": "前端传值",
							"text": "前端传值",
						},
						{
							"value": "后端生成",
							"text": "后端生成",
						},
					];

				} else {
					this.where_val = [{
							"value": '固定值',
							"text": "固定值",
						},

						{
							"value": "后端生成",
							"text": "后端生成",
						},
					];

				}

				this.items_index_1 = items_index;



				this.init()
			},
			front_list_val(item, index, isdata) {
				this.field_data_list[index]['input_box'] = item
				if (item == 'switch' || item == 'checkbox' || item == 'select') {
					this.input_box_index = index;
					this.input_box_item = item;
					this.$emit('up_add', this.input_box_index, this.input_box_item)
					return
				}
				this.field_data_list[index]['input_box'] = item

			},
			on_select_set(index, item) {
				this.input_box_index = index;
				this.input_box_item = item;
				this.$emit('up_add', this.input_box_index, this.input_box_item)
			},
			on_del_field_data_list(index) {
				this.field_data_list.splice(index, 1);
			},
			init() {
				this.Banmikeji.PW_mysql_init_ajax().then(ret => {
					this.p_list = ret.data.p_list;
					this.q_list_validate = ret.data.q_list_validate;
					for (var i = 0; i < this.q_list_validate.length; i++) {
						this.q_list_validate[i]['text'] = this.q_list_validate[i]['name'];
						this.q_list_validate[i]['value'] = i;
					}


					this.h_list_validate = ret.data.h_list_validate;
					for (var i = 0; i < this.h_list_validate.length; i++) {
						this.h_list_validate[i]['text'] = this.h_list_validate[i]['name'];
						this.h_list_validate[i]['value'] = i;
					}




				})
			},
			field_where_list_where_ziduan(item, index) {

				this.field_data_list[index]['field'] = item
				this.field_data_list[index]['key'] = item

			},
			field_where_list_where_where(item, index) {

				this.field_data_list[index]['where'] = item

			},

			field_where_list_where_val(item, index) {

				this.field_data_list[index]['value_type'] = item


			},
			field_where_list_where_value(item, index) {

				this.field_data_list[index]['value'] = item
				this.field_data_list[index]['verify_id'] = this.h_list_validate[item]['id']
				console.log("this.field_data_list[index]: " + JSON.stringify(this.field_data_list[index]['verify_id']));

			},
			field_where_list_where_kong(item, index) {

				this.field_data_list[index]['empty'] = item

			},
			field_where_list_where_verify(item, index) {
				this.field_data_list[index]['verify'] = item
				this.field_data_list[index]['verify_id'] = this.q_list_validate[item]['id']
			},

			on_close() {
				this.popup.close()
			},
			subQuestion() {
				this.$emit('img_ok', this.find)
				this.popup.close()
			},


		}
	}
</script>

<style>
	button {
		padding: 0;

		background: transparent;
	}

	.top_but {
		background-color: #F8F8F8;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 999;
		background-color: #F8F8F8;
		bottom: 288rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.sub_btn {

		height: 70rpx;
		width: 100rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}

	button::after {
		border: none;
	}
</style>